<template>
  <div>
    <Form ref="formInline" :model="searchData" inline :label-width="70">
      <FormItem label="店铺名称:">
        <Input type="text" v-model="searchData.shop_name" />
      </FormItem>
      <FormItem label="负责人:">
        <Input type="text" v-model="searchData.username" />
      </FormItem>
      <FormItem label="手机号:">
        <Input type="text" v-model="searchData.mobile" />
      </FormItem>
      <FormItem label="地址:">
        <Input type="text" v-model="searchData.address" />
      </FormItem>
      <FormItem label="推荐人:">
        <Input type="text" v-model="searchData.invite" placeholder="请输入推荐人手机号" />
      </FormItem>
      <FormItem label="状态:">
        <Select v-model="searchData.status" style="width: 120px;">
          <Option value="0">待审核</Option>
          <Option value="1">已审核</Option>
        </Select>
      </FormItem>
      <Button type="primary" @click="search()">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
    </Form>

    <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" border
      stripe>
      <template slot-scope="{ row , index}" slot="imgSlot">
        <img :src="baseImgeUrl + row.img" style="width: 60px;height: 60px;" @click="showImg(baseImgeUrl + row.img)"
          v-if="row.img" />
      </template>
      <template slot-scope="{ row , index}" slot="businessSlot">
        <img :src="baseImgeUrl + row.business_img" style="width: 60px;height: 60px;"
          @click="showImg(baseImgeUrl + row.business_img)" v-if="row.business_img" />
      </template>
      <template slot-scope="{ row , index}" slot="makeSlot">
        <!-- <Tooltip content="详情" style="margin-left: 10px;" placement="top">
          <Icon type="md-bulb" size="24" color="#ff9900" style="cursor: pointer;" @click="shopDetail(row)" />
        </Tooltip> -->
        <Tooltip content="审核" style="margin-left: 1px;" placement="top" v-if="row.status == 0">
          <Icon type="md-checkbox-outline" size="24" color="#ed4014" style="cursor: pointer;" @click="shopAudit(row)" />
        </Tooltip>
        <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
          <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;" @click="showEdit(row)" />
        </Tooltip>
        <Tooltip content="删除" style="margin-left: 10px;" placement="top">
          <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;" @click.stop="del(row.id)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>
    <!-- 图片放大-->
    <Modal v-model="imgShow" title="查看图片" width="40">
      <img :src="imgShowUrl" style="width: 100%;height: 100%;">
    </Modal>

    <!-- 详情-->
    <Modal title="详情" v-model="infoModalShow" :draggable="true">
      <List>
        <ListItem>店铺名称：{{ formItem.shop_name }}</ListItem>
        <ListItem>店铺图片：<img :src="baseImgeUrl + formItem.img" style="width: 50px;height: 50px;" v-if="formItem.img" />
        </ListItem>
        <ListItem>营业执照：<img :src="baseImgeUrl + formItem.business_img" style="width: 50px;height: 50px;"
            v-if="formItem.business_img" /></ListItem>
      </List>
    </Modal>

    <!-- 审核 -->
    <Modal v-model="auditModal" title="审核" @on-ok="auditModalOk">
      <Form :model="formItem" :label-width="80">
        <FormItem label="状态">
          <Radio-group v-model="formItem.status">
            <Radio label="1" value="1">审核通过</Radio>
            <Radio label="2" value="2">审核拒绝</Radio>
          </Radio-group>
        </FormItem>
        <FormItem label="拒绝原因" v-if="formItem.status == 2">
          <Input v-model="formItem.remark" placeholder="请输入拒绝原因" type="textarea"></Input>
        </FormItem>
      </Form>
    </Modal>

    <!-- 编辑 -->
    <Modal v-model="editModal" title="编辑" @on-ok="editUserModalOk">
      <Form :model="formItem" :label-width="80">
        <FormItem label="店铺名称">
          <Input v-model="formItem.shop_name" placeholder="请输入店铺名称"></Input>
        </FormItem>
        <FormItem label="负责人">
          <Input v-model="formItem.username" placeholder="请输入负责人名称"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="formItem.mobile" placeholder="请输入负责人手机号"></Input>
        </FormItem>
        <FormItem label="邀请人">
          <Input v-model="formItem.invite_mobile" placeholder="请输入邀请人手机号"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
  name: "shopList",
  components: {
    Paginate,
  },
  data() {
    return {
      baseUrl: baseUrl,
      baseImgeUrl: baseImgeUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { Authorization: getToken() },
      searchData: {
        page: 1,
        limit: 10,
        order_by: "status",
        sort: 'asc'
      },
      // 列表
      columns: [
        {
          title: 'ID',
          align: "center",
          key: 'id',
          sortable: 'custom',
        },
        {
          title: '店铺名称',
          align: "center",
          key: 'shop_name',
          sortable: 'custom',
        },
        {
          title: '负责人',
          align: "center",
          key: 'username',
          sortable: 'custom',
        },
        {
          title: '手机号',
          align: "center",
          key: 'mobile',
          sortable: 'custom',
        },
        {
          title: '地址',
          align: "center",
          key: 'address',
          sortable: 'custom',
        },
        {
          title: '店铺图片',
          align: "center",
          key: 'img',
          slot: "imgSlot"
        },
        {
          title: '营业执照',
          align: "center",
          key: 'business_img',
          slot: "businessSlot"
        },
        {
          title: '邀请人',
          align: "center",
          key: 'inviter_name',
          sortable: 'custom',
        },
        {
          title: '状态',
          align: "center",
          key: 'status_attr',
          sortable: 'custom',
        },
        {
          title: '操作',
          align: "center",
          slot: 'makeSlot',
          width: 210
        },
      ],
      // 数据
      list: [],
      total: 0,
      imgShow: false,
      imgShowUrl: '',
      editModal: false,
      formItem: {},
      infoModalShow: false,
      auditModal: false,
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      this.$axios('/admin/shop/getList', this.searchData).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
        order_by: "status",
        sort: 'asc'
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    showImg(url) {
      this.imgShow = true;
      this.imgShowUrl = url;
    },
    auditModalOk() {
      this.$axios('/admin/shop/status', this.formItem).then(res => {
        this.$Message.success('审核成功');
        this.getList();
      });
    },
    del(id) {
      this.$Modal.confirm({
        title: '删除店铺',
        content: "<p>您确定要删除该店铺吗？</p>",
        onOk: () => {
          this.$axios('/admin/shop/del', { id: id }).then(res => {
            this.$Message.success('删除成功');
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info('取消操作');
        }
      });
    },
    editUserLevel(row) {
      this.formUserItem = row;
      this.editUserModal = true;
    },
    editUserModalOk() {
      this.$axios('/admin/shop/edit', this.formItem).then(res => {
        this.$Message.success('保存成功');
        this.getList();
      });
    },
    shopDetail(row) {
      this.infoModalShow = true;
      this.formItem = { ...row };
    },
    showEdit(row) {
      this.editModal = true;
      this.formItem = { ...row };
    },
    shopAudit(row) {
      this.auditModal = true;
      this.formItem = { ...row };
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
